<!--查看文档-->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" class="card">
          <el-row class="top">
            <el-col :span="18"><span style="font-size: 12px">我的项目：</span>{{ state.title }}</el-col>
            <el-col :span="6">
              <div class="weui-cell__ft" @click="switchProject">切换项目</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


    <div class="weui-cells">
      <a v-for="item in state.docList" class="weui-cell  weui-cell_access">
        <span class="weui-cell__bd"><span style="font-size: 12px">{{ item.projectName }}</span></span>
        <div class="weui-cell__ft" style="font-size: 10px" @click="to(item)">查看内容</div>
      </a>
    </div>

    <el-dialog v-model="state.dialogVisible" width="90%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <span style="font-size: 16px;font-weight: 700">您目前没有项目！如有疑问请联系客服</span>
      <div style="width: 60%;margin: 0 auto">
        <el-image src="https://xunyingcloud.cn/_nuxt/kefu.DY2rjQmw.png"/>
      </div>
    </el-dialog>
    <el-drawer size="90%" v-model="state.drawer" direction="btt" title="页面启动请耐心等待，文档显示后可以在底部跳转显示比例！">
      <iframe :src="state.view" width="100%" height="100%" frameborder="0"></iframe>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import {useHead} from '#app';
import requester from "~/utils/request";
import {useRoute} from "vue-router";
import {userStore} from "~/composables/useUserStore";
const route = useRoute()
useHead({
  link: [
    {rel: 'stylesheet', href: 'https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css'}
  ],
  script: [
    {
      src: 'https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js',
      type: 'text/javascript',
    },
  ]
});
const store = userStore()
const state = reactive({
  drawer:false,
  dialogVisible: false,
  title: "",
  ProjectList: [],
  docList: [],
  view:""
})

onMounted(async () => {
  // 打开等待
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  if (store.isLogin) {
    //登录开始初始化
    init()
  } else {
    const code = route.query.code
    if (code === undefined) {
      getCode()
    } else {
      silentLogin(code)
    }
  }
  loading.close()
})

const silentLogin = async (code: any) => {
  //code换取登录信息
  requester.post('/api/login/codeLogin', {code: code, type: "snsapi_base"}).then(res => {
    //40029code被使用
    if (res.code === 200) {
      //存储用户信息
      store.setToken(res.data)
      //设置登录状态
      store.isLogin = true
      init()
    } else {
      getCode()
    }
  })
}
async function init() {
  const res: any = await requester.post("/api/project/search", {userCode: store.token.userCode})
  if (res.data.length === 0) {
    state.dialogVisible = true
    return
  }
  for (let i = 0; i < res.data.length; i++) {
    state.ProjectList.push({label: res.data[i].projectName, value: res.data[i].id})
  }
  requester.post("/api/project/doc", {projectId: state.ProjectList[0].value}).then(res => {
    state.docList = res.data;
  })
  //如果项目大于1就弹出框显示
  if (state.ProjectList.length > 1) {
    showPicker();
  } else if (state.ProjectList.length === 1) {
    state.title = state.ProjectList[0].label;
  }
}

function getCode() {
  //拼接链接进行登录
  window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4754a2bb841ba595&redirect_uri=` +
      encodeURIComponent("https://xunyingcloud.cn/my/mobile/viewDocument") +
      "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect")
}


/**
 * 切换项目
 */
function switchProject() {
  showPicker()
}

function to(path: any) {

  state.drawer = true

  requester.get(`/api/file/downloadFile?path=${path.projectPath}`).then(res => {
    state.view = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(res.data)}`

      console.log(state.view)

    // window.location.href = state.view
  })


}

const showPicker = () => {
  weui.picker(
      state.ProjectList,
      {
        onChange: (result) => {
        },
        onConfirm: (result: any) => {
          state.title = result[0].label;
          requester.post("/api/project/doc", {projectId: result[0].value}).then(res => {
            state.docList = res.data;
            console.log(res.data)
          })


        },
        title: '请选择您的项目',
        showClose: false
      }
  );
};
</script>

<style scoped lang="scss">
.card {
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, #e2f6fe, #d7edfa);
  color: #0c090c;
  font-weight: 500;
  .top {
    height: 80%;
    .withdrawable-title {
      font-size: 12px;
    }

    .withdrawable-money {
      padding-top: 5px;
      font-size: 22px;
    }
  }

  .bottom {
    padding-top: 5px;
    height: 20%;
    .income {
      font-size: 11px;
    }
  }
}
</style>
